/*  */
.main {
    position: relative;
}

.main-left {
    width: 22.5%;
    height: 100%;
    margin: 0 1%;
    position: relative;
    animation: loadFromRight 1s linear;
    -webkit-animation: loadFromRight 1s linear;
}

@keyframes loadFromRight {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.main-right {
    width: 74%;
    height: 100%;
    position: relative;
    animation: loadFromLeft 1s linear;
    -webkit-animation: loadFromLeft 1s linear;

}

@keyframes loadFromLeft {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.main-left-con {
    width: 3.1rem;
    height: 6.1rem;
    background: url(../../../static/img/images/side-border.png);
    background-size: cover;
}

.main-right-con {
    width: 10.1rem;
    height: 6.1rem;
    background: url(../../../static/img/images/table-border.png);
    background-size: cover;
    position: absolute;
}

.main-left-tit,
.main-right-tit {
    color: rgba(134, 199, 221, 1);
    font-size: 0.14rem;
    text-align: left;
    position: absolute;
    top: 0.06rem;
    left: 0.06rem;
}

.main-left-tit>span,
.main-right-tit>span {
    font-size: 0.18rem;
    margin-left: 0.05rem;
}

 .branch {
  margin-top: 45px;
  margin-left: 30px;
 }

.body-top {
  float: left;
 }

.body-button {
    float: left;
}

.body-button button {
    width: 0.72rem;
    height: 0.3rem;
    background: linear-gradient(to bottom, #85D1FF, #086CFF);
    border-radius: 0.04rem;
    color: #fff;
    cursor: pointer;
    margin-left: 0.2rem;
    line-height: 0.32rem;
    font-size: 0.13rem;
}

.body-button button:hover {
    color: #c1fff8;
}

.layui-btn>img {
    width: 0.20rem;
    margin-left: -0.07rem;
}

.layui-atn>img {
    width: 0.20rem;
    margin-left: -0.07rem;
}

 .body-top>span{
    color: rgba(9, 153, 252, 1);
    font-size: 0.12rem;
 }

 .body-top input{
    width: 180px;
    height: 30px;
    border-radius: 2px;
    border: 1px solid rgba(9, 153, 252, 1);
    margin-right: 6px;
    background: none;
    color: #fff;
    text-indent: 10px;
 }

.order-body-bottom {
    float: left;
    width: 99.4%;
    margin-top: 12px;
    padding-left: 4px;
}

.body-content-table {
    position: relative;
}

.body-content-table .layui-table-box {
    min-height: 4.6rem;
}

.body-content-table .layui-table-cell{
    color: #FFFFFF !important;
}

.main-left-tree {
    width: 100%;
    height: 100%;
    padding-top: 62px;
    padding-left: 80px;
}

.add-node {
    display: none;
    position: absolute;
    top: 40%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 11rem;
    height: 5.6rem;
    border-radius: 0.06rem;
    background-color: rgba(14, 21, 37, 0.9);
    box-shadow: inset 0px 0px 0.3rem 0px rgba(84, 161, 241, 1);
    padding: 0 0.15rem;
}

.add-node-body {
    width: 100%;
    height: 5rem;
    border-top: 0.01rem solid #54A1F1;
}

.add-node-body>ul {
    position: relative;
    width: 100%;
    height: 4rem;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    margin-top: 0.1rem;
    flex-wrap: wrap;
}

.add-node-body-item {
    width: 33%;
    height: 0.45rem;
    display: flex;
    align-items: center;
    color: #54A1F1;
    font-size: 0.12rem;
    white-space: nowrap;
}

.add-node-body-item>div:nth-child(1) {
    width: 0.72rem;
    margin: 0 0.02rem 0 0.25rem;
}

.add-node-body-item input {
    width: 2.4rem;
    height: 0.32rem;
    border-radius: 0.04rem;
    border: 1px solid rgba(84, 161, 241, 1);
    background: transparent;
    text-indent: 0.1rem;
    color: #54A1F1;
}

.add-node-submit {
    width: 100%;
    height: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-node-submit>button:nth-child(2) {
    width: 1rem;
    height: .40rem;
    border-radius: 0.06rem;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(to bottom, #12DBF7, #54A1F1);
}
.add-node-submit>button:nth-child(2):active{
     background: linear-gradient(to bottom, #15FBF9, #63B9F7);
     color: #DDD;
}

#reset {
    width: 1rem;
    height: 0.40rem;
    border-radius: 0.06rem;
    border: 1px solid rgba(84, 161, 241, 1);
    cursor: pointer;
    margin-right: 0.2rem;
    color: #54A1F1;
    text-align: center;
    line-height: 0.4rem;
    background: transparent;
}

.main-tit {
    height: 0.4rem;
    color: #54A1F1;
    font-size: 0.14rem;
    display: flex;
    align-items: center;
}

.main-tit img {
    margin-right: 0.06rem;
    width: 0.2rem;
    height: 0.2rem;
}

.main-tit>div {
    margin: auto 0 auto auto;
    cursor: pointer;
}

.main-tit>div:hover {
    color: #068db7;
}

.table-tool button {
    width: 48px;
    height: 20px;
    border-radius: 2px;
    background: linear-gradient(#0DF5F5,
        #0999FC) ;
    color:#fff;
    cursor: pointer;
}